<template>
  <div>
    <el-drawer
      title="优惠调整"
      :before-close="handleClose"
      :visible.sync="editDiscountDialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
      size="35%"
    >
      <div class="demo-drawer__content">
        <el-form
          :model="discountForm"
          label-position="top"
          ref="discountFormRef"
          :rules="discountFormRules"
        >
          <el-form-item
            label="调整范围"
            :label-width="formLabelWidth"
            prop="dateRangeCreatedDate"
          >
            <el-date-picker
              size="small"
              v-model="discountForm.dateRangeCreatedDate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 340px"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            prop="discountAmount"
            label="优惠调整"
            :label-width="formLabelWidth"
            style="width: 340px"
          >
            <span style="width: 60px; margin-right: 10px">每升优惠</span>
            <el-input
              v-model="discountForm.discountAmount"
              placeholder="请输入"
              style="flex: 1"
              clearable
              size="small"
            ></el-input>
            元
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="handleClose" size="small">取 消</el-button>
          <el-button type="primary" @click="handleSubmit" size="small"
            >确定</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { updatePayOrderAmtApi } from "@/api/station/order";
export default {
  name: "OrderDiscountAmountDrawer",
  props: {
    editDiscountDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    // 自定义校验规则，可以输入任意整数或小数, 保留两位小数
    let checkMoney = (rule, value, callback) => {
      let money = Number(value.trim());
      const pattern = /^\d+(\.\d{1,2})?$/;
      // console.log(value, money, typeof money, "校验值");
      if (!value) return callback(new Error("请输入金额"));
      if (Number.isNaN(money)) return callback(new Error("请输入有效数值"));
      if (money < 0) return callback(new Error("金额不能小于0"));
      if (!pattern.test(money))
        return callback(new Error("金额最多只能保留两位小数点"));
      callback();
    };
    return {
      discountForm: {
        dateRangeCreatedDate: [], // 调整时间范围
        discountAmount: "", // 调整金额
      },
      formLabelWidth: "80px",
      discountFormRules: {
        dateRangeCreatedDate: [{ required: true, message: "请选择时间" }],
        discountAmount: [
          { validator: checkMoney, required: true, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    console.log(this);
  },
  methods: {
    handleClose(done) {
      this.$emit("update:editDiscountDialog", false);
      this.resetForm("discountFormRef");
    },

    handleSubmit() {
      this.$refs.discountFormRef.validate((valid) => {
        if (valid) {
          let params = {};
          params.startTime = this.discountForm.dateRangeCreatedDate[0];
          params.endTime = this.discountForm.dateRangeCreatedDate[1];
          params.discountAmount = this.discountForm.discountAmount.trim();
          updatePayOrderAmtApi(params).then((res) => {
            this.msgSuccess("调整订单优惠成功");
            this.$emit("update:editDiscountDialog", false);
            this.resetForm("discountFormRef");
            this.$emit("reloadData");
          });
          console.log("提交", params);
        } else {
          console.log("error submit");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
::v-deep .el-drawer__body {
  padding: 0px 30px;
}

::v-deep .el-form-item__content {
  display: flex;
  align-items: center;
}

::v-deep .el-input {
  margin-right: 10px;
}

.demo-drawer__footer {
  text-align: end;
}

::v-deep .el-drawer__header {
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}

::v-deep .el-drawer__header > :first-child {
  font-size: 18px;
}
</style>
